<template>
  <div>
    <van-nav-bar
        title="翻译"
    />
    <p style="margin-top: 20px;text-align: center;font-size: 120%;margin-bottom: 0px" class="fo">英译中&nbsp;&nbsp;<van-switch v-model="checked" @change="tran" size="18px" active-color="Snow" inactive-color="Snow"/>&nbsp;&nbsp;中译英</p>
    <div class="effect" :style="{width: wwidth, height: hheight, background: 'Snow', marginLeft: '15px', marginTop: '18px'}">
      <div style="height: 10px"></div>
      <p align="left" style="margin-top: 0px;margin-bottom: 10px"><span style="margin-left: 10%;">英文原音</span><van-icon name="play-circle" style="margin-left: 10px" size="large" @click="sound"/></p>
      <div style="width: 90%; height: 40%; margin-left: 5%;">
        <van-field
            class="effect"
            v-model="message"
            rows="7"
            label="原文"
            type="textarea"
            maxlength="200"
            placeholder="请输入原文"
            clearable
            show-word-limit
            label-width="30px"
            style="height: 100%; font-size: 16px"
            @input="tran"
        />
      </div>
      <p style="margin-top: 10px;margin-bottom: 10px"><van-icon name="sort" size="large"/></p>
      <div style="width: 90%; height: 40%; margin-left: 5%;">
        <van-field
            class="effect"
            v-model="result"
            rows="8"
            label="译文"
            type="textarea"
            placeholder="译文"
            clearable
            label-width="30px"
            style="height: 100%; font-size: 16px"
            readonly
        />
      </div>
    </div>
    <div id="mm"></div>
  </div>
</template>

<script>
export default {
  name: "Translate",
  data(){
    return{
      wwidth: (window.innerWidth - 30) + 'px',
      hheight: (window.innerHeight - 200) + 'px',
      message: '',
      result:'',
      checked: false,
      timer:''
    }
  },
  methods:{
    tran(){
      if (this.timer) {
        clearTimeout(this.timer)
      }
      const _this = this
      this.timer = setTimeout(function (){
        let to = _this.checked ? "from=zh-CHS&to=en&" : "from=en&to=zh-CHS&";
        let config = {
          method: 'post',
          url: "https://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray?" + to + "appId=TAD8d6EqqaKUV5nclhhfgEmPXfT5HhQ6hwK6YWFpLyAo*&texts=%5B%22" + _this.message + "%22%5D&_=1648601709455",
          headers: {
            'Content-Type': 'application/json'
          },
        };
        _this.$ajax(config)
            .then(
                function (res){
                  _this.result = res.data[0].TranslatedText
                }
            )
      }, 500);
    },
    sound(){
      let mm = document.getElementById('mm')
      mm.innerHTML = ''
      let au = document.createElement('audio')
      let scr = document.createElement('source');
      scr.type = 'audio/mpeg';
      let text = this.checked ? this.result : this.message;
      scr.src = 'https://tts.youdao.com/fanyivoice?word=' + text + '&le=eng&keyfrom=speaker-target'
      au.className = 'au'
      au.id = 'au'
      au.appendChild(scr)
      mm.appendChild(au)
      setTimeout(function (){
        document.getElementById('au').play()
      }, 200);
    }
  }
}
</script>

<style scoped>
.effect{
  box-shadow:1px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
  webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
  moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
  o-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
  border-radius:25px;
}
.van-field__body{
  height: 190px;
}
</style>